<template>
  <div>
    <el-form :inline="true" size="mini" @submit.native.prevent="GetList">
      <el-form-item label="ID查询">
        <el-input v-model="where['id-like']" />
      </el-form-item>
      <el-form-item label="地址查询">
        <el-input v-model="where['imtoken-wallet-like']" />
      </el-form-item>
      <el-form-item label="父级查询：ID">
        <el-input v-model="where['parent-id-like']" />
      </el-form-item>
      <el-form-item label="父级地址查询">
        <el-input v-model="where['parent-imtoken-wallet-like']" />
      </el-form-item>
      <el-form-item label="直属下级查询：ID">
        <el-input v-model="where['sub-id-like']" />
      </el-form-item>
      <el-form-item label="直属下级查询：地址">
        <el-input v-model="where['sub-imtoken-wallet-like']" />
      </el-form-item>
      <el-form-item label="全部下级查询：ID">
        <el-input v-model="where['all-id-like']" />
      </el-form-item>
      <el-form-item label="全部下级查询：地址">
        <el-input v-model="where['all-imtoken-wallet-like']" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
        <el-button @click="where={};GetList()">清除</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <span>钱包地址：{{ scope.row.wallet_address }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID"/>
      <!-- <el-table-column prop="mobile" label="手机">
        <template slot-scope="scope">+{{ scope.row.country_code }} {{ scope.row.original_mobile }}</template>
      </el-table-column> -->
      <el-table-column prop="invitation_code" label="邀请码"/>
      <el-table-column prop="imtoken_wallet_address" label="imtoken钱包地址" />

      <el-table-column label="R币">
        <template slot-scope="scope">{{ scope.row.balance_coin | amount }}</template>
      </el-table-column>
      <el-table-column label="ETH">
        <template slot-scope="scope">{{ scope.row.eth_coin | amount }}</template>
      </el-table-column>
      <el-table-column label="积分">
        <template slot-scope="scope">{{ scope.row.amount_coin | amount }}</template>
      </el-table-column>
      <el-table-column label="等级">
        <template
          slot-scope="scope"
        >{{ ['', '注册会员', '体验会员', '共识会员', '共识一星', '共识二星', '共识三星', '共识四星', '共识五星'][scope.row.vip_level] }}</template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{ ['', '正常', '禁用'][scope.row.status] }}</template>
      </el-table-column>
      <el-table-column prop="created_at" label="注册时间" width="200" />
    </el-table>

    <el-pagination
      :current-page="listInfo.current_page"
      :total="listInfo.total"
      :page-size="listInfo.per_page"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="size => GetList(1, size)"
      @current-change="(page, size) => GetList(page)"
    />
  </div>
</template>

<script>
export default {
  name: 'PersonSearch',
  data() {
    return {
      where: {},
      condition: {},
      listInfo: {},
      list: [],
      loading: false
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    /**
     * 获取列表
     */
    GetList(page = 1, size) {
      this.loading = true
      size = size || this.listInfo.per_page || 10
      const params = { page, size, ...this.where }
      this.$http.get('member-persons', { params }).then(response => {
        this.listInfo = response.meta
        this.list = response.resource
        this.loading = false
      })
    }
  }
}
</script>
